<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			section {
				position: relative;
				width: 300px;
				height: 200px;
				margin: 150px auto;
				animation: move 10s linear infinite;
				transform-style: preserve-3d;
				background: url('../img/daocheng4.jpg');
			}
			section:hover {
				animation-play-state: paused;
			}
			@-ms-keyframes move{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(0);
				}
			}
			section div {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url('../img/hai.jpg');
			}
				section div:nth-child(1) {
					transform: translateZ(300px);
				}
				section div:nth-child(2) {
					transform: rotateY(60px) translateZ(300px);
				}
				section div:nth-child(3) {
					transform: rotateY(120px) translateZ(300px);
				}
				section div:nth-child(4) {
					transform: rotateY(180px) translateZ(300px);
				}
				section div:nth-child(5) {
					transform: rotateY(240px) translateZ(300px);
				}
				section div:nth-child(6) {
					transform: rotateY(300px) translateZ(300px);
				}
			
		</style>
	</head>
	<body>
		<section>
			<div id=""></div>
			<div id=""></div>
			<div id=""></div>
			<div id=""></div>
			<div id=""></div>
			<div id=""></div>
		</section>
	</body>
</html>
